<template>
  <div>
    <el-row :gutter="20" style="margin:0px" type="flex" justify="left">
      <el-col :span="1">
        <el-button size="mini" type="primary" @click="dialogVisible = true">新增</el-button>
      </el-col>
      <el-col :span="1">
        <el-button size="mini" type="primary">删除</el-button>
      </el-col>
      <el-col :span="1">
        <el-button size="mini" type="primary">导入</el-button>
      </el-col>
      <el-col :span="1">
        <el-button size="mini" type="primary">导出</el-button>
      </el-col>
    </el-row>

    <el-dialog title="新增人员" :visible.sync="dialogVisible" width="720px" :before-close="handleClose">
      <el-form
        ref="formData"
        :model="formData"
        label-width="80px"
        label-position
        size="mini"
        :rules="rules"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" width="100px" prop="Name">
              <el-input v-model="formData.Name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工号" prop="WorkNo">
              <el-input v-model="formData.WorkNo"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="民族" prop="Race">
              <el-input v-model="formData.Race"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="Sex">
              <el-select v-model="formData.Sex" placeholder="性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="身份证" prop="IDNumber">
              <el-input v-model="formData.IDNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学历" prop="Degree">
              <el-select v-model="formData.Degree" placeholder="学历">
                <el-option label="初中" value="初中"></el-option>
                <el-option label="高中" value="高中"></el-option>
                <el-option label="专科" value="专科"></el-option>
                <el-option label="本科" value="本科"></el-option>
                <el-option label="研究生硕士" value="研究生硕士"></el-option>
                <el-option label="硕士博士生" value="硕士博士生"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="政治面貌" prop="PoliticsStatus">
              <el-select v-model="formData.PoliticsStatus" placeholder="政治面貌">
                <el-option label="中共党员" value="中共党员"></el-option>
                <el-option label="中共预备党员" value="中共预备党员"></el-option>
                <el-option label="共青团员" value="共青团员"></el-option>
                <el-option label="民革党员" value="民革党员"></el-option>
                <el-option label="民盟盟员" value="民盟盟员"></el-option>
                <el-option label="民建会员" value="民建会员"></el-option>
                <el-option label="民进会员" value="民进会员"></el-option>
                <el-option label="农工党党员" value="农工党党员"></el-option>
                <el-option label="致公党党员" value="致公党党员"></el-option>
                <el-option label="九三学社社员" value="九三学社社员"></el-option>
                <el-option label="台盟盟员" value="台盟盟员"></el-option>
                <el-option label="无党派人士" value="无党派人士"></el-option>
                <el-option label="群众" value="群众"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同到期" prop="ContractEndDate">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="formData.ContractEndDate"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="Email" prop="Email">
              <el-input v-model="formData.Email"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="籍贯" prop="OriginPosition">
              <el-input v-model="formData.OriginPosition"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="专业" prop="Major">
              <el-input v-model="formData.Major"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="毕业学校" prop="School">
              <el-input v-model="formData.School"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="岗位类型" prop="JobType">
              <el-input v-model="formData.JobType"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="岗位等级" prop="JobLevel">
              <el-input v-model="formData.JobLevel"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="职称" prop="ProName">
              <el-input v-model="formData.ProName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="聘任时间" prop="EngageTime">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="formData.EngageTime"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-button type="primary" @click="submitForm('formData')">确 定</el-button>
          </el-col>
          <el-col :span="2">
            <el-button @click="dialogVisible = false">取 消</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- <div slot="footer" class="dialog-footer">


      </div>-->
    </el-dialog>

    <el-table :data="tableData" border style="width: 100%" size="mini">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="Name" label="姓名"></el-table-column>
      <el-table-column prop="WorkNo" label="工号"></el-table-column>
      <el-table-column prop="Department" label="所属部门"></el-table-column>
      <el-table-column prop="Sex" label="性别"></el-table-column>
      <el-table-column prop="BirthDay" label="出生年月"></el-table-column>
      <el-table-column prop="Year" label="年龄"></el-table-column>
      <el-table-column prop="PhoneNumber" label="手机号" width="120px"></el-table-column>
      <el-table-column prop="IDNumber" label="身份证号码" width="200px"></el-table-column>
      <el-table-column prop="Degree" label="学历"></el-table-column>
      <el-table-column prop="PoliticsStatus" label="政治面貌"></el-table-column>
      <el-table-column Status="Status" label="人员状态"></el-table-column>
      <el-table-column prop="ContractEndDate" label="合同到期"></el-table-column>
      <el-table-column prop="ProName" label="职称"></el-table-column>
      <el-table-column label="管理">
        <template slot-scope="scope">
          <el-button size="mini" @click="EditRow(scope.$index,scope.row)" style="width:40%">编</el-button>
          <el-button size="mini" @click="DeleteRow(scope.$index,scope.row)" style="width:40%">删</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isNewMode: true,
      dialogVisible: false,
      formData: {
        Name: '',
        WorkNo: '',
        Department: '',
        Sex: '',
        Year: '',
        PhoneNumber: '',
        IDNumber: '',
        Degree: '',
        PoliticsStatus: '',
        Status: '',
        ContractEndDate: '',
        ProName: ''
      },
      tableData: [
        // {
        //   Name: '王小虎',
        //   WorkNo: '112233',
        //   Department: '奥特曼工厂',
        //   Sex: '男',
        //   PhoneNumber: '13311112222',
        //   IDNumber: '520520520520520520520',
        //   Degree: '本科',
        //   PoliticsStatus: '政治状态',
        //   Status: '状态',
        //   ContractEndDate: '2018-2-2',
        //   ProName: '专家',
        //   BirthDate: '1992-09-12',
        //   Year: '22'
        // }
      ],
      rules: {
        Name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        WorkNo: [
          { required: true, message: '请选择工作号', trigger: 'change' }
        ],
        Race: [{ required: true, message: '请选择民族', trigger: 'change' }],
        Sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        PhoneNumber: [
          { required: true, message: '请填写电话号码', trigger: 'change' }
        ],
        Degree: [{ required: true, message: '请输入学历', trigger: 'change' }],
        ProName: [{ required: true, message: '请输入职称', trigger: 'change' }],
        ContractEndDate: [
          {
            type: 'date',
            required: true,
            message: '请选择时间',
            trigger: 'change'
          }
        ],
        IDNumber: [
          { required: true, message: '请填写身份证号', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    ClearData: function() {
      this.formData = {
        // Name: '',
        // WorkNo: '',
        // Department: '',
        // Sex: '',
        // Year: '',
        // PhoneNumber: '',
        // IDNumber: '',
        // Degree: '',
        // PoliticsStatus: '',
        // Status: '',
        // ContractEndDate: '',
        // ProName: ''
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.addOrEditDepartment()
        } else {
          this.$message('error submit!!')
          return false
        }
      })
    },
    addOrEditDepartment() {
      if (this.isNewMode) this.addNewUser()
      else this.updateUser()
      this.dialogVisible = false
      this.getAllUser()
    },
    DeleteRow(index, data) {
      this.$confirm('确认关闭？').then(e => {
        this.axios
          .delete('/User/DeleteUser', {
            data: { Guids: [data.Id] }
          })
          .then(e => {
            this.tableData.splice(index, 1)
          })
      })
    },
    EditRow(index, data) {
      this.isNewMode = false
      this.axios
        .get('/User/GetUserDetailData', {
          params: {
            userId: data.Id
          }
        })
        .then(e => {
          this.formData = e.data
          this.dialogVisible = true
        })
    },
    handleClose() {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.ClearData()
          this.$refs['formData'].resetFields()
          this.dialogVisible = false
        })
        .catch(_ => {})
    },
    updateUser() {
      this.axios.put('/User/UpdateUser', this.formData).then(e => {
        this.getAllUser()
      })
    },
    addNewUser() {
      this.axios.post('/User/CreateUser', this.formData).then(e => {
        this.getAllUser()
      })
    },
    getAllUser(search) {
      this.axios
        .get('/User/GetUserSampleData', {
          params: {
            pageIndex: '1',
            pageSize: '50',
            search: search
          }
        })
        .then(e => {
          this.tableData = e.data
        })
    },
    getAllDepartment() {
      this.axios.get('/User/GetAllDepartment').then(e => {
        this.departmentOptions = e.data
      })
    }
  },
  created() {
    this.getAllDepartment()
    this.getAllUser()
  }
}
</script>

<style lang="stylus">
.el-select
  width 100%
</style>

